<template>
  <ElDrawer v-model="opened" :title="formType" size="50%">
    <ElSkeleton v-if="loading" animated :rows="10" />
    <ElForm v-else :model="form" ref="formRef" label-width="150" :rules="rules" :disabled="isView">
      <ElFormItem label="主题名称" prop="name">
        <ElInput placeholder="请输入" v-model="form.name" />
      </ElFormItem>

      <ElFormItem label="图标" prop="icon">
        <UploadImg v-model:image-url="form.icon" :api="uploadCover" width="130px" height="130px" :file-size="5">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传图片</span>
          </template>
          <template #tip> 图片大小不能超过 5M </template>
        </UploadImg>
      </ElFormItem>

      <ElFormItem label="登录背景图片" prop="loginBgImg">
        <UploadImg v-model:image-url="form.loginBgImg" :api="uploadCover" width="192px" height="108px" :file-size="20">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传图片</span>
          </template>
          <template #tip> 图片大小不能超过 20M </template>
        </UploadImg>
      </ElFormItem>

      <ElFormItem label="登录页标题图片" prop="loginTitleImg">
        <UploadImg v-model:image-url="form.loginTitleImg" :api="uploadCover" width="542px" height="86px" :file-size="5">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传图片</span>
          </template>
          <template #tip> 图片大小不能超过 5M </template>
        </UploadImg>
      </ElFormItem>

      <ElFormItem label="门户标题图片" prop="homeTitleImg">
        <UploadImg v-model:image-url="form.homeTitleImg" :api="uploadCover" width="541px" height="63px" :file-size="1">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传图片</span>
          </template>
          <template #tip> 图片大小不能超过 20M </template>
        </UploadImg>
      </ElFormItem>

      <ElFormItem label="启用">
        <ElSwitch v-model="form.enable" active-text="启用" active-value="1" inactive-text="关闭" inactive-value="0" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton v-if="!isView" type="primary" @click="onSaveClicked">保存</ElButton>
      <ElButton v-if="isView" @click="onCancelClicked">关闭</ElButton>
      <ElButton v-else @click="onCancelClicked">取消</ElButton>
    </template>
  </ElDrawer>
</template>

<script setup lang="ts">
import { reactive, ref, unref, computed, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { FormType } from '@/enums'
import { Theme } from '@api/uc/theme/interface'
import { getTheme, addTheme, updateTheme } from '@api/uc/theme'
import { uiUpload } from '@api/upload'
import UploadImg from '@/components/Upload/Img.vue'
import { treeMenuOption } from '@api/uc/menu'
import { TreeNode } from '@/api/interface'
const formType = ref<FormType>()
const formRef = ref<FormInstance>()
const form = ref<Partial<Theme.Form>>({})
const opened = ref(false)
const loading = ref(true)
const emit = defineEmits(['success'])
const menuTree = ref<TreeNode[]>([])
// const defaultProps = {
//   children: 'children',
//   label: 'name'
// }
onMounted(async () => {
  const { data } = await treeMenuOption()
  menuTree.value = data
})

// 是否查看
const isView = computed(() => {
  return formType.value === FormType.VIEW
})

// 是否新增
const isAdd = computed(() => {
  return formType.value === FormType.ADD
})

// const filterNode = (value: string, data: any) => {
//   if (!value) return true
//   return data.name.includes(value)
// }

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '主题名称不能为空', trigger: 'blur' },
    { max: 50, message: '主题名称最大长度 50', trigger: 'blur' }
  ]
})

// 上传封面
function uploadCover(formData: FormData) {
  return uiUpload('app', formData)
}

// 打开表单
async function open(type: FormType, id?: string) {
  formType.value = type
  opened.value = true
  if (isAdd.value) {
    loading.value = false
    form.value = {}
  } else {
    try {
      const { data } = await getTheme(id!)
      loading.value = false
      form.value = data
    } finally {
      loading.value = false
    }
  }
  formRef.value?.clearValidate()
}

// 关闭表单
function close() {
  loading.value = true
  opened.value = false
}

// 保存按钮
function onSaveClicked() {
  if (!formRef.value) return
  formRef.value?.validate(valid => {
    if (!valid) {
      return
    }
    const menu = Object.assign({}, unref(form))
    if (isAdd.value) {
      addTheme(menu).then(() => {
        success()
        sendSuccess()
        close()
      })
    } else {
      updateTheme(menu).then(() => {
        success()
        sendSuccess()
        close()
      })
    }
  })
}

// 成功弹出提示
function success() {
  ElMessage({
    type: 'success',
    message: `成功!`
  })
}

// 成功失败弹出提示
// function error(err: string) {
//   ElMessage({
//     type: 'error',
//     message: `失败!  ${err}`
//   })
// }

// 取消按钮
function onCancelClicked() {
  close()
}

// 保存成功发送成功事件
function sendSuccess() {
  emit('success')
}

defineExpose({
  open,
  close
})
</script>
